<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>搜索功能</title>
        <!-- 引入 Vue 3 CDN -->
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <link rel="stylesheet" href="/css/index.css" />
    </head>

    <body>
        <div id="app">
            <div id="search-container">
                <div class="search-content">
                    <input
                        type="text"
                        id="search-input"
                        v-model="keyword"
                        placeholder="请输入搜索关键字"
                        @input="fetchSuggestions"
                        @keyup.enter="search"
                    />
                    <div class="button-content">
                        <div class="search-button" @click="search"></div>
                    </div>
                </div>
                <div
                    id="suggestions"
                    v-if="suggestions.length > 0"
                    style="display: block"
                >
                    <div
                        v-for="suggestion in suggestions"
                        :key="suggestion"
                        class="suggestion-item"
                        @click="selectSuggestion(suggestion)"
                    >
                        {{ suggestion }}
                    </div>
                </div>
            </div>
            <div class="result">
                <div class="result-content">
                    <div class="item" v-for="(item, index) in resultList" :key="index">
                        <div class="image">
                            <img :src="item.imageUrl" alt="book" />
                        </div>
                        <div class="price">￥{{item.price}}</div>
                        <div class="title" v-html="item.title"></div>
                        <div class="author" v-html="item.author"></div>
                        <div class="publisher" v-html="item.publisher"></div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        keyword: '',
                        pageNum: 1,
                        pageSize: 20,
                        suggestions: [],
                        price: 25.8,
                        resultList: [],
                    };
                },
                // 添加 mounted 钩子函数
                mounted() {
                    this.search();
                },
                methods: {
                    // 模拟后端接口获取自动补全建议
                    async fetchSuggestions() {
                        if (this.keyword.trim()) {
                            const response = await fetch(`/book/getSuggest?keyword=${this.keyword.trim()}`, {
                                method: 'GET',
                            });

                            if (!response.ok) {
                                throw new Error('网络响应异常');
                            }

                            const data = await response.json();
                            if (data.data) {
                                this.suggestions = data.data;
                            } else {
                                this.suggestions = [];
                            }
                        } else {
                            this.suggestions = [];
                        }
                    },
                    selectSuggestion(suggestion) {
                        this.keyword = suggestion;
                        this.suggestions = [];
                        this.search();
                    },
                    async search() {
                        this.suggestions = [];
                        const response = await fetch(`/book/search`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                keyword: this.keyword.trim(),
                                pageNum: this.pageNum, // 假设默认页码为 1
                                pageSize: this.pageSize // 假设默认每页显示 10 条
                            })
                        });
                        if (!response.ok) {
                            throw new Error('网络响应异常');
                        }

                        const data = await response.json();
                        if (data.data) {
                            this.resultList = data.data.books;
                            console.log(this.resultList)
                        } else {
                            this.resultList = [];
                        }
                    },
                },
            }).mount('#app');
        </script>
    </body>
</html>
